<template>
  <div class="pc-layout">
    <!-- 顶部导航栏 -->
    <header class="top-nav">
      <div class="nav-container">
        <div class="nav-left">
          <h1 class="nav-title">律智助手2.0 - 管理端</h1>
        </div>
        
        <div class="nav-right">
          <!-- 通知提醒 -->
          <div class="notification-bell" @click="showNotifications">
            <el-badge :value="notificationCount" :max="99" class="notification-badge">
              <i class="fas fa-bell notification-icon"></i>
            </el-badge>
          </div>
          
          <div class="user-menu">
            <el-dropdown>
              <span class="user-info">
                <i class="fas fa-user-circle"></i>
                <span>{{ userStore.userInfo?.name || '管理员' }}</span>
                <i class="fas fa-chevron-down ml-2"></i>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>
                    <i class="fas fa-user mr-2"></i>个人资料
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <i class="fas fa-cog mr-2"></i>系统设置
                  </el-dropdown-item>
                  <el-dropdown-item divided @click="logout">
                    <i class="fas fa-sign-out-alt mr-2"></i>退出登录
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </div>
    </header>

    <div class="layout-container">
      <!-- 侧边栏导航 -->
      <aside class="sidebar">
        <nav class="sidebar-nav">
          <router-link to="/admin" class="nav-item" :class="{ active: $route.path === '/admin' }">
            <i class="fas fa-tachometer-alt"></i>
            <span>系统概览</span>
          </router-link>
          
          <router-link to="/admin/clients" class="nav-item" :class="{ active: $route.path.startsWith('/admin/clients') }">
            <i class="fas fa-users-cog"></i>
            <span>客户管理</span>
          </router-link>
          
          <router-link to="/admin/lawyers" class="nav-item" :class="{ active: $route.path.startsWith('/admin/lawyers') }">
            <i class="fas fa-user-tie"></i>
            <span>律师管理</span>
          </router-link>
          
          <router-link to="/admin/users" class="nav-item" :class="{ active: $route.path.startsWith('/admin/users') }">
            <i class="fas fa-user-shield"></i>
            <span>用户管理</span>
          </router-link>
          
          <router-link to="/admin/business" class="nav-item" :class="{ active: $route.path.startsWith('/admin/business') }">
            <i class="fas fa-briefcase"></i>
            <span>业务管理</span>
          </router-link>
          
          <router-link to="/admin/cases" class="nav-item" :class="{ active: $route.path.startsWith('/admin/cases') && !$route.path.startsWith('/admin/cases/library') }">
            <i class="fas fa-folder-open"></i>
            <span>案件信息管理</span>
          </router-link>
          
          <router-link to="/admin/cases/library" class="nav-item" :class="{ active: $route.path.startsWith('/admin/cases/library') }">
            <i class="fas fa-book"></i>
            <span>案例库管理</span>
          </router-link>
          
          <router-link to="/admin/knowledge" class="nav-item" :class="{ active: $route.path.startsWith('/admin/knowledge') }">
            <i class="fas fa-brain"></i>
            <span>知识库管理</span>
          </router-link>
          
          <router-link to="/admin/workflow-settings" class="nav-item" :class="{ active: $route.path.startsWith('/admin/workflow-settings') }">
            <i class="fas fa-project-diagram"></i>
            <span>工作流程设置</span>
          </router-link>
          
          <router-link to="/admin/points" class="nav-item" :class="{ active: $route.path.startsWith('/admin/points') }">
            <i class="fas fa-coins"></i>
            <span>积分系统</span>
          </router-link>
          
          <router-link to="/admin/statistics" class="nav-item" :class="{ active: $route.path.startsWith('/admin/statistics') }">
            <i class="fas fa-chart-bar"></i>
            <span>数据统计</span>
          </router-link>
          
          <router-link to="/admin/logs" class="nav-item" :class="{ active: $route.path.startsWith('/admin/logs') }">
            <i class="fas fa-file-alt"></i>
            <span>日志管理</span>
          </router-link>
        </nav>
      </aside>

      <!-- 主要内容区域 -->
      <main class="main-content">
        <router-view />
      </main>
    </div>

    <!-- 通知提醒对话框 -->
    <el-dialog v-model="notificationDialogVisible" title="任务提醒" width="800px">
      <div class="notification-content">
        <!-- 提醒统计 -->
        <div class="notification-stats">
          <div class="stat-item critical">
            <div class="stat-icon">
              <i class="fas fa-exclamation-triangle"></i>
            </div>
            <div class="stat-content">
              <div class="stat-number">{{ taskStats.urgent }}</div>
              <div class="stat-label">紧急任务</div>
            </div>
          </div>
          <div class="stat-item warning">
            <div class="stat-icon">
              <i class="fas fa-clock"></i>
            </div>
            <div class="stat-content">
              <div class="stat-number">{{ taskStats.overdue }}</div>
              <div class="stat-label">超期任务</div>
            </div>
          </div>
          <div class="stat-item info">
            <div class="stat-icon">
              <i class="fas fa-tasks"></i>
            </div>
            <div class="stat-content">
              <div class="stat-number">{{ taskStats.pending }}</div>
              <div class="stat-label">待处理任务</div>
            </div>
          </div>
        </div>

        <!-- 任务筛选 -->
        <div class="notification-filters">
          <el-select v-model="taskFilter" placeholder="任务类型" class="filter-select">
            <el-option label="全部任务" value="all"></el-option>
            <el-option label="紧急任务" value="urgent"></el-option>
            <el-option label="超期任务" value="overdue"></el-option>
            <el-option label="待处理任务" value="pending"></el-option>
          </el-select>
          
          <el-button type="primary" @click="markAllAsRead" size="small">
            <i class="fas fa-check mr-1"></i>全部标记已读
          </el-button>
        </div>

        <!-- 任务列表 -->
        <div class="notification-list">
          <div 
            v-for="task in filteredTasks" 
            :key="task.id"
            class="notification-item"
            :class="{ 'unread': !task.read, [task.type]: true }"
            @click="handleTaskClick(task)"
          >
            <div class="task-icon">
              <i :class="getTaskIcon(task.type)"></i>
            </div>
            <div class="task-content">
              <div class="task-title">{{ task.title }}</div>
              <div class="task-description">{{ task.description }}</div>
              <div class="task-meta">
                <span class="task-time">{{ formatTime(task.createTime) }}</span>
                <el-tag :type="getTaskTagType(task.type)" size="small">
                  {{ getTaskTypeText(task.type) }}
                </el-tag>
              </div>
            </div>
            <div class="task-actions">
              <el-button 
                v-if="!task.read" 
                type="text" 
                size="small" 
                @click.stop="markAsRead(task)"
              >
                标记已读
              </el-button>
              <el-button type="text" size="small" @click.stop="handleTask(task)">
                处理
              </el-button>
            </div>
          </div>
          
          <div v-if="filteredTasks.length === 0" class="empty-state">
            <i class="fas fa-bell-slash"></i>
            <p>暂无提醒任务</p>
          </div>
        </div>
      </div>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="notificationDialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="viewAllTasks">查看全部任务</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, computed, onMounted } from 'vue'
import { useUserStore } from '@/stores/user'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import dayjs from 'dayjs'

export default {
  name: 'AdminLayout',
  setup() {
    const userStore = useUserStore()
    const router = useRouter()
    
    // 通知相关状态
    const notificationDialogVisible = ref(false)
    const taskFilter = ref('all')
    
    // 任务统计
    const taskStats = reactive({
      urgent: 5,
      overdue: 8,
      pending: 12
    })
    
    // 任务数据
    const tasks = ref([
      {
        id: 1,
        type: 'urgent',
        title: '紧急案件处理',
        description: '交通事故案件CASE202401001需要立即处理，客户要求加急',
        createTime: '2024-02-15 09:30:00',
        read: false
      },
      {
        id: 2,
        type: 'overdue',
        title: '案件超期提醒',
        description: '案件CASE202401002已超期3天，请及时跟进处理',
        createTime: '2024-02-14 16:20:00',
        read: false
      },
      {
        id: 3,
        type: 'pending',
        title: '鉴定报告待审核',
        description: '张三案件的伤残鉴定报告已完成，等待审核确认',
        createTime: '2024-02-14 14:15:00',
        read: true
      },
      {
        id: 4,
        type: 'urgent',
        title: '客户投诉处理',
        description: '客户李四对案件进度不满，需要紧急沟通处理',
        createTime: '2024-02-14 11:45:00',
        read: false
      },
      {
        id: 5,
        type: 'overdue',
        title: '材料补充超期',
        description: '王五案件材料补充已超期，影响案件进度',
        createTime: '2024-02-13 17:30:00',
        read: false
      },
      {
        id: 6,
        type: 'pending',
        title: '律师费用确认',
        description: '赵六案件律师费用待确认，请及时处理',
        createTime: '2024-02-13 13:20:00',
        read: true
      }
    ])
    
    // 计算通知数量（未读任务）
    const notificationCount = computed(() => {
      return tasks.value.filter(task => !task.read).length
    })
    
    // 过滤后的任务列表
    const filteredTasks = computed(() => {
      if (taskFilter.value === 'all') {
        return tasks.value
      }
      return tasks.value.filter(task => task.type === taskFilter.value)
    })
    
    const logout = () => {
      userStore.logout()
      router.push('/login')
    }
    
    // 通知相关方法
    const showNotifications = () => {
      notificationDialogVisible.value = true
    }
    
    const getTaskIcon = (type) => {
      const iconMap = {
        urgent: 'fas fa-exclamation-triangle',
        overdue: 'fas fa-clock',
        pending: 'fas fa-tasks'
      }
      return iconMap[type] || 'fas fa-info-circle'
    }
    
    const getTaskTagType = (type) => {
      const typeMap = {
        urgent: 'danger',
        overdue: 'warning',
        pending: 'info'
      }
      return typeMap[type] || 'info'
    }
    
    const getTaskTypeText = (type) => {
      const textMap = {
        urgent: '紧急',
        overdue: '超期',
        pending: '待处理'
      }
      return textMap[type] || '未知'
    }
    
    const formatTime = (time) => {
      return dayjs(time).format('MM-DD HH:mm')
    }
    
    const handleTaskClick = (task) => {
      if (!task.read) {
        markAsRead(task)
      }
      // 这里可以根据任务类型跳转到相应页面
      ElMessage.info(`点击了任务: ${task.title}`)
    }
    
    const markAsRead = (task) => {
      task.read = true
      updateTaskStats()
      ElMessage.success('已标记为已读')
    }
    
    const markAllAsRead = () => {
      filteredTasks.value.forEach(task => {
        task.read = true
      })
      updateTaskStats()
      ElMessage.success('已全部标记为已读')
    }
    
    const handleTask = (task) => {
      // 根据任务类型处理不同逻辑
      switch (task.type) {
        case 'urgent':
          router.push('/admin/cases')
          break
        case 'overdue':
          router.push('/admin/overdue-reminder')
          break
        case 'pending':
          router.push('/admin/cases')
          break
        default:
          ElMessage.info(`处理任务: ${task.title}`)
      }
      notificationDialogVisible.value = false
    }
    
    const viewAllTasks = () => {
      router.push('/admin/overdue-reminder')
      notificationDialogVisible.value = false
    }
    
    const updateTaskStats = () => {
      const unreadTasks = tasks.value.filter(task => !task.read)
      taskStats.urgent = unreadTasks.filter(task => task.type === 'urgent').length
      taskStats.overdue = unreadTasks.filter(task => task.type === 'overdue').length
      taskStats.pending = unreadTasks.filter(task => task.type === 'pending').length
    }
    
    // 初始化时更新统计
    onMounted(() => {
      updateTaskStats()
    })
    
    return {
      userStore,
      logout,
      notificationDialogVisible,
      notificationCount,
      taskFilter,
      taskStats,
      tasks,
      filteredTasks,
      showNotifications,
      getTaskIcon,
      getTaskTagType,
      getTaskTypeText,
      formatTime,
      handleTaskClick,
      markAsRead,
      markAllAsRead,
      handleTask,
      viewAllTasks,
      updateTaskStats
    }
  }
}
</script>

<style scoped>
.pc-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f3f4f6;
}

.top-nav {
  background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
  color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 50;
}

.nav-container {
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.nav-left .nav-title {
  font-size: 20px;
  font-weight: bold;
  color: white;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* 通知铃铛样式 */
.notification-bell {
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: background-color 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notification-bell:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.notification-icon {
  font-size: 18px;
  color: white;
  transition: color 0.3s ease;
}

.notification-bell:hover .notification-icon {
  color: #fbbf24;
}

.notification-badge {
  position: relative;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  color: white;
}

.user-info:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.user-info i:first-child {
  font-size: 20px;
}

.user-info span {
  font-size: 14px;
  font-weight: 500;
}

.layout-container {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* 侧边栏样式 */
.sidebar {
  width: 240px;
  background: white;
  border-right: 1px solid #e5e7eb;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
  overflow-y: auto;
}

.sidebar-nav {
  padding: 20px 0;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 12px 24px;
  color: #6b7280;
  text-decoration: none;
  transition: all 0.3s ease;
  border-left: 3px solid transparent;
  margin: 2px 0;
}

.nav-item:hover {
  color: #7c3aed;
  background-color: #faf5ff;
  border-left-color: #c4b5fd;
}

.nav-item.active {
  color: #7c3aed;
  background-color: #f3e8ff;
  border-left-color: #7c3aed;
  font-weight: 600;
}

.nav-item i {
  font-size: 16px;
  margin-right: 12px;
  width: 20px;
  text-align: center;
}

.nav-item span {
  font-size: 14px;
}

/* 主内容区域 */
.main-content {
  flex: 1;
  overflow-y: auto;
  background-color: #f9fafb;
  padding: 0;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .sidebar {
    width: 200px;
  }
  
  .nav-container {
    padding: 0 20px;
  }
}

/* 通知对话框样式 */
.notification-content {
  max-height: 60vh;
  overflow-y: auto;
}

.notification-stats {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.stat-item {
  background: white;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 150px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.stat-item.critical {
  border-left: 4px solid #ef4444;
}

.stat-item.warning {
  border-left: 4px solid #f59e0b;
}

.stat-item.info {
  border-left: 4px solid #3b82f6;
}

.stat-item .stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.stat-item.critical .stat-icon {
  background: #fef2f2;
  color: #ef4444;
}

.stat-item.warning .stat-icon {
  background: #fffbeb;
  color: #f59e0b;
}

.stat-item.info .stat-icon {
  background: #eff6ff;
  color: #3b82f6;
}

.stat-item .stat-number {
  font-size: 20px;
  font-weight: bold;
  color: #1f2937;
  margin-bottom: 4px;
}

.stat-item .stat-label {
  color: #6b7280;
  font-size: 12px;
}

.notification-filters {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 20px;
  padding: 16px;
  background: #f9fafb;
  border-radius: 8px;
}

.notification-filters .filter-select {
  width: 150px;
}

.notification-list {
  background: white;
  border-radius: 8px;
  overflow: hidden;
}

.notification-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  border-bottom: 1px solid #f3f4f6;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.notification-item:hover {
  background-color: #f9fafb;
}

.notification-item:last-child {
  border-bottom: none;
}

.notification-item.unread {
  background-color: #eff6ff;
  border-left: 4px solid #3b82f6;
}

.notification-item.urgent .task-icon {
  color: #ef4444;
}

.notification-item.overdue .task-icon {
  color: #f59e0b;
}

.notification-item.pending .task-icon {
  color: #3b82f6;
}

.task-icon {
  width: 40px;
  height: 40px;
  background: #f3f4f6;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.task-content {
  flex: 1;
}

.task-title {
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 4px;
  line-height: 1.4;
}

.task-description {
  color: #6b7280;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 8px;
}

.task-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.task-time {
  color: #9ca3af;
  font-size: 12px;
}

.task-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #9ca3af;
}

.empty-state i {
  font-size: 48px;
  margin-bottom: 16px;
  display: block;
}

.empty-state p {
  margin: 0;
  font-size: 14px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

@media (max-width: 768px) {
  .layout-container {
    flex-direction: column;
  }
  
  .sidebar {
    width: 100%;
    height: auto;
    border-right: none;
    border-bottom: 1px solid #e5e7eb;
  }
  
  .sidebar-nav {
    display: flex;
    overflow-x: auto;
    padding: 8px 16px;
  }
  
  .nav-item {
    flex-shrink: 0;
    padding: 8px 16px;
    margin: 0 4px;
    border-left: none;
    border-bottom: 3px solid transparent;
    border-radius: 8px;
  }
  
  .nav-item.active {
    border-left: none;
    border-bottom-color: #7c3aed;
  }
  
  .nav-item:hover {
    border-left: none;
    border-bottom-color: #c4b5fd;
  }
}
</style> 